<template>
	<div class="contents">
		<Headerc>个人信息</Headerc>
		<div class="content">
			<section class="userbg">
				<van-row type="flex" justify="center" class="center-mt">
					<van-col span="8" class="mycenter">
						<div class="myImg">
							<img src="../assets/img/userimg1.jpg" alt="">
						</div>
						<p class="center-name">delion</p>
						<p class="center-name">
							<span class="center-focus">关注3</span><span>粉丝2</span>
						</p>
					</van-col>
				</van-row>
			</section>
			<section>
				<van-row>
					<van-col class="sellistrow">
						<van-cell is-link>
						  <template slot="title">
							<span class="custom-text">账号:</span>
							<van-tag type="danger" class="delbg"></van-tag>
						  </template>
						</van-cell>
						<van-cell is-link>
						  <template slot="title">
							<span class="custom-text">真实姓名:</span>
							<van-tag type="danger" class="delbg"></van-tag>
						  </template>
						</van-cell>
						<van-cell is-link>
						  <template slot="title">
							<span class="custom-text">性别:</span>
							<van-tag type="danger" class="delbg"></van-tag>
						  </template>
						</van-cell>
						<van-cell is-link>
						  <template slot="title">
							<span class="custom-text">联系方式:</span>
							<van-tag type="danger" class="delbg"></van-tag>
						  </template>
						</van-cell>
						<van-cell to="/card" title="实名认证" is-link class="sellist" value="实名认证"/>
					</van-col>
				</van-row>
			</section>
		</div>
	</div>
</template>

<script>
import Headerc from './Headerc'
import Vue from 'vue'
import { Row, Col, Cell, CellGroup, Tag } from 'vant'
Vue.use(Row).use(Col).use(Cell).use(CellGroup).use(Tag)
export default {
	data () {
		return {}
	},
	components: {
		Headerc
	}
}
</script>

<style lang="scss" scoped="scoped">
@import '@/lib/reset.scss';
.userbg {
	@include rect(100%, 1.98rem);
	background: #f3f3f3;
}
.center-mt {
	margin-top: .15rem;
}
.mycenter {
	@include flexbox();
	@include flex-direction(column);
	@include justify-content();
	@include align-items();
}
.myImg {
	@include rect(.82rem, .82rem);
	@include border-radius(50%);
	border: 1px solid #ccc;
	box-sizing: border-box;
	// background: #f00;
	img {
		@include rect(.82rem, .82rem);
		@include border-radius(50%);
	}
}
.center-name {
	margin-top: .05rem;
}
.sellistrow {
	width: 100%!important;
}
.center-focus {
	margin-right: .1rem;
}
.delbg {
	background: none!important;
}
</style>
